<template>
  <view class="member_detail">
    <view class="panel">
      <view class="panel-content">
        <view class="title">我的VIP积分:{{ count }}</view>
        <view class="desc">计算方法:消费金额*10+每日任务积分</view>
      </view>
    </view>
    <view class="log">
      <view class="log-item" v-for="(item, index) in list" :key="index">
        <view class="date">
          <view class="day">{{ item.date }}</view>
          <view class="count">当月累计获得：{{ item.points }}积分</view>
        </view>
        <view class="recording-list">
          <view class="recording-item" v-for="(sub, sk) in item.day" :key="sk">
            <view class="date-label">{{ item.date }}</view>
            <view class="date-log" v-for="(key, ik) in sub.list" :key="ik">
              <view class="left">
                <view class="time">{{ key.time }}</view>
                <view class="desc">{{ key.desc }}</view>
              </view>
              <view class="points">
                +{{ key.points }}积分
                <img class="icon" src="./images/i.png" alt="" />
              </view>
            </view>
          </view>
        </view>
      </view>
      <u-divider @tap="onClickOperate($event, 'more')"
        >点击查看更多记录</u-divider
      >
    </view>
  </view>
</template>
<script>
import tools from '@/shopro/utils/tools';
const _delay = tools.delayDither(50);
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  data() {
    return {
      count: '1000',
      // 页码
      page: 1,
      // 行数
      rows: 10,
      //记录列表
      list: [
        {
          date: '2023.05',
          points: '3990',
          day: [
            {
              date: '05月17日 周三',
              list: [
                {
                  time: '18:46:18',
                  desc: '余额消费99.00元',
                  points: '990',
                },
                {
                  time: '18:46:18',
                  desc: '余额消费99.00元',
                  points: '990',
                },
              ],
            },
            {
              date: '05月17日 周三',
              list: [
                {
                  time: '18:46:18',
                  desc: '余额消费99.00元',
                  points: '990',
                },
                {
                  time: '18:46:18',
                  desc: '余额消费99.00元',
                  points: '990',
                },
              ],
            },
          ],
        },
        {
          date: '2023.05',
          points: '3990',
          day: [
            {
              date: '05月17日 周三',
              list: [
                {
                  time: '18:46:18',
                  desc: '余额消费99.00元',
                  points: '990',
                },
              ],
            },
          ],
        },
      ],
      // 加载中
      loading: false,
      //完成 到底
      finished: false,
    };
  },
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   */
  //监听页面初始化，其参数同 onLoad 参数 触发时机早于 onLoad 百度小程序
  //onInit() {},
  /** 监听页面加载
   * 其参数为上个页面传递的数据，
   * 参数类型为 Object（用于页面传参）
   */
  onLoad() {
    this.getData();
  },
  // 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
  onShow() {},
  // 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
  methods: {
    /**
     *  页面点击事件 防抖
     * @param {Object} ev  $event
     * @param {String} name 执行名称
     * @param {Object} data 传值
     */
    onClickOperate(ev, name, data = {}) {
      _delay(() => {
        switch (name) {
          // 关闭弹窗
          case 'more':
            if (this.finished) return;
            this.page = Number(this.page) + 1;
            this.getData({
              status: 'pull',
            });
            break;
        }
      });
    },

    getData(ev = {}) {
      //
      return;
      let { status = 'init' } = ev;

      if (status === 'init') {
        this.page = 1;
        this.rows = 10;
      }
      this.loading = true;
      this.$http(
        '',
        {
          page: this.page,
          rows: this.rows,
        },
        '加载中'
      ).then((res) => {
        if (res.code === 1) {
          switch (status) {
            case 'init':
              this.list = res.data.list;
              break;
            case 'pull':
              this.list.push(...res.data.list);
              break;
          }
          if (res.data.list.length < this.rows) {
            this.finished = true;
          }
        }
        this.loading = false;
      });
    },
  },
  /** ---------- */
  // 监听窗口尺寸变化 App、微信小程序、快手小程序
  //onResize() {},
  // 监听用户下拉动作，一般用于下拉刷新
  //onPullDownRefresh() {},
  // 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
  //onReachBottom() {},
  //点击 tab 时触发，参数为Object 微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
  //onTabItemTap() {},
  //用户点击右上角分享 微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序、京东小程序
  //onShareAppMessage() {},
  //监听页面滚动 nvue暂不支持
  //onPageScroll() {},
  //监听原生标题栏按钮点击事件 App、H5
  //onNavigationBarButtonTap() {},
  /** 监听页面返回
   * 返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键
   * navigateBack表示来源是 uni.navigateBack ；
   * 支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。
   * app、H5、支付宝小程序
   */
  //onBackPress() {},
  // 监听原生标题栏搜索输入框输入内容变化事件 App、H5
  //onNavigationBarSearchInputChanged() {},
  // 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。App、H5
  //onNavigationBarSearchInputConfirmed() {},
  // 监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）App、H5
  //onNavigationBarSearchInputClicked() {},
  // 监听用户点击右上角转发到朋友圈 微信小程序
  //onShareTimeline() {},
  // 监听用户点击右上角收藏 微信小程序、QQ小程序
  //onAddToFavorites() {},
};
</script>
<style lang="scss" scoped>
.member_detail {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: #a084f0;

  .panel {
    padding: 20rpx 60rpx 50rpx;
    .panel-content {
      padding: 20rpx 70rpx;
      width: 100%;
      height: 140rpx;
      border-radius: 20rpx;
      background: #d7c9ff;

      .title {
        margin-bottom: 20rpx;
        font-size: 38rpx;
        font-weight: 700;
        color: #3d3d3d;
      }
      .desc {
        font-size: 24rpx;
        font-weight: 400;
        color: #808080;
      }
    }
  }
  .log {
    padding: 0 30rpx 30rpx;
    width: 100%;
    min-height: calc(100vh - 210rpx);
    background: #ffffff;
    border-radius: 20rpx 20rpx 0 0;
    .log-item:nth-child(2n-1) {
      border-bottom: 2rpx solid rgba(151, 151, 151, 0.6);
    }
    .log-item {
      padding: 50rpx 0rpx;
      .date {
        margin-bottom: 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .day {
          font-size: 30rpx;
          color: #000000;
        }
        .count {
          font-size: 24rpx;
          font-weight: 400;
          color: #3d3d3d;
        }
      }
      .recording-list {
        .recording-item {
          margin-top: 40rpx;
          .date-label {
            margin-bottom: 20rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: #3d3d3d;
          }
          .date-log {
            .points {
              display: flex;
              align-items: center;
              font-size: 28rpx;
              font-weight: 400;
              color: #a084f0;
              .icon {
                margin-left: 10rpx;
                width: 30rpx;
                height: 30rpx;
              }
            }
            .left {
              display: flex;
            }
            display: flex;
            justify-content: space-between;
            align-items: center;
            .time {
              margin-right: 50rpx;
              font-size: 24rpx;
              font-weight: 400;
              color: #979797;
            }
            .desc {
              font-size: 24rpx;
              font-weight: 400;
              color: #979797;
            }
          }
        }
      }
    }
  }
}
</style>
